<template>
  <div class="edit">
    <el-dialog :visible.sync="dialogVisible" center class="countDialog" :close-on-click-modal="false" @close="resetForm()">
      <div slot="title" class="dialog-title">{{ pageTitle }}</div>
      <div>
        <el-tabs v-model="activeName" type="card" size="small" @tab-click="handleClick">
          <el-tab-pane label="请求控量" name="req_lrate">
            <el-form ref="form_req" :model="req_lrate" label-width="120px">
              <el-form-item label="是否开启">
                <el-switch v-model="req_lrate.is_set"></el-switch>
              </el-form-item>
              <el-form-item label="匀速投放">
                <el-switch v-model="req_lrate.is_yunsu"></el-switch>
              </el-form-item>
              <el-form-item label="每天总量">
                <el-input type="number" min="0" v-model.number="req_lrate.dnum"></el-input>
              </el-form-item>
              <el-form-item label="小时总量">
                <el-input type="number" min="0" v-model.number="req_lrate.hnum"></el-input>
              </el-form-item>
              <el-form-item label="小时设置">
                <div style="display: flex; flex-wrap: wrap; gap: 10px;">
                  <div style="flex: 1 0 120px; " v-for="item in req_lrate.hitems">
                    <el-input size="small" type="number" min="0" v-model.number="item.num">
                      <template slot="prepend">{{item.vat}}:</template>
                    </el-input>
                  </div>
                </div>
              </el-form-item>
              <el-form-item>
                <el-button type="small" @click="onSubmit()">提交</el-button>
                <el-button type="small" @click="resetForm()">取消</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="展示控量" name="pv_lrate">
            <el-form ref="form_pv" :model="pv_lrate" label-width="120px">
              <el-form-item label="是否开启">
                <el-switch v-model="pv_lrate.is_set"></el-switch>
              </el-form-item>
              <el-form-item label="匀速投放">
                <el-switch v-model="pv_lrate.is_yunsu"></el-switch>
              </el-form-item>
              <el-form-item label="每天总量">
                <el-input type="number" min="0" v-model.number="pv_lrate.dnum"></el-input>
              </el-form-item>
              <el-form-item label="每小时总量">
                <el-input type="number" min="0" v-model.number="pv_lrate.hnum"></el-input>
              </el-form-item>
              <el-form-item label="小时设置">
                <div style="display: flex; flex-wrap: wrap; gap: 10px;">
                  <div style="flex: 1 0 120px; " v-for="item in pv_lrate.hitems">
                    <el-input size="small" type="number" min="0" v-model.number="item.num">
                      <template slot="prepend">{{item.vat}}:</template>
                    </el-input>
                  </div>
                </div>
              </el-form-item>
              <el-form-item>
                <el-button type="small" @click="onSubmit()">提交</el-button>
                <el-button @click="resetForm()">取消</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="点击控量" name="ck_lrate">
            <el-form ref="form_ck" :model="ck_lrate" label-width="120px">
              <el-form-item label="是否开启">
                <el-switch v-model="ck_lrate.is_set"></el-switch>
              </el-form-item>
              <el-form-item label="匀速投放">
                <el-switch v-model="ck_lrate.is_yunsu"></el-switch>
              </el-form-item>
              <el-form-item label="每天总量">
                <el-input type="number" min="0" v-model.number="ck_lrate.dnum"></el-input>
              </el-form-item>
              <el-form-item label="每小时总量">
                <el-input type="number" min="0" v-model.number="ck_lrate.hnum"></el-input>
              </el-form-item>
              <el-form-item label="小时设置">
                <div style="display: flex; flex-wrap: wrap; gap: 10px;">
                  <div style="flex: 1 0 120px; " v-for="item in ck_lrate.hitems">
                    <el-input size="small" type="number" min="0" v-model.number="item.num">
                      <template slot="prepend">{{item.vat}}:</template>
                    </el-input>
                  </div>
                </div>
              </el-form-item>
              <el-form-item>
                <el-button type="small" @click="onSubmit()">提交</el-button>
                <el-button @click="resetForm()">取消</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {channel_slot_edit_rate} from '@/api/channelslot'
export default {
  name: 'channel_slot-rate-edit',
  data(){
    return {
      dialogVisible: false,
      pageTitle:'控量设置',
      activeName: 'req_lrate',
      dspslot_id:'',
      req_lrate:{
        is_set:false,
        is_yunsu:false,
        dnum:0,
        hnum:0,
        hitems:[
            {vat:"0",num:0,},{vat:"1",num:0,},{vat:"2",num:0,},{vat:"3",num:0,},{vat:"4",num:0,},{vat:"5",num:0,},{vat:"6",num:0,},{vat:"7",num:0,},
            {vat:"8",num:0,},{vat:"9",num:0,},{vat:"10",num:0,},{vat:"11",num:0,},{vat:"12",num:0,},{vat:"13",num:0,},{vat:"14",num:0,},{vat:"15",num:0,},
            {vat:"16",num:0,},{vat:"17",num:0,},{vat:"18",num:0,},{vat:"19",num:0,},{vat:"20",num:0,},{vat:"21",num:0,},{vat:"22",num:0,},{vat:"23",num:0,},
        ]
      },
      pv_lrate:{
        is_set:false,
        is_yunsu:false,
        dnum:0,
        hnum:0,
        hitems:[
          {vat:"0",num:0,},{vat:"1",num:0,},{vat:"2",num:0,},{vat:"3",num:0,},{vat:"4",num:0,},{vat:"5",num:0,},{vat:"6",num:0,},{vat:"7",num:0,},
          {vat:"8",num:0,},{vat:"9",num:0,},{vat:"10",num:0,},{vat:"11",num:0,},{vat:"12",num:0,},{vat:"13",num:0,},{vat:"14",num:0,},{vat:"15",num:0,},
          {vat:"16",num:0,},{vat:"17",num:0,},{vat:"18",num:0,},{vat:"19",num:0,},{vat:"20",num:0,},{vat:"21",num:0,},{vat:"22",num:0,},{vat:"23",num:0,},
        ]},
      ck_lrate:{
        is_set:false,
        is_yunsu:false,
        dnum:0,
        hnum:0,
        hitems:[
          {vat:"0",num:0,},{vat:"1",num:0,},{vat:"2",num:0,},{vat:"3",num:0,},{vat:"4",num:0,},{vat:"5",num:0,},{vat:"6",num:0,},{vat:"7",num:0,},
          {vat:"8",num:0,},{vat:"9",num:0,},{vat:"10",num:0,},{vat:"11",num:0,},{vat:"12",num:0,},{vat:"13",num:0,},{vat:"14",num:0,},{vat:"15",num:0,},
          {vat:"16",num:0,},{vat:"17",num:0,},{vat:"18",num:0,},{vat:"19",num:0,},{vat:"20",num:0,},{vat:"21",num:0,},{vat:"22",num:0,},{vat:"23",num:0,},
        ]},
    }
  },
  computed: {
  },
  components: {

  },
  mounted(){
  },
  created() {
  },
  methods: {
    handleClick(val){
      console.log(val)
    },
    resetForm(){
      var tmp = {
        is_set:false,
        is_yunsu:false,
        dnum:0,
        hnum:0,
        hitems:[
          {vat:"0",num:0,},{vat:"1",num:0,},{vat:"2",num:0,},{vat:"3",num:0,},{vat:"4",num:0,},{vat:"5",num:0,},{vat:"6",num:0,},{vat:"7",num:0,},
          {vat:"8",num:0,},{vat:"9",num:0,},{vat:"10",num:0,},{vat:"11",num:0,},{vat:"12",num:0,},{vat:"13",num:0,},{vat:"14",num:0,},{vat:"15",num:0,},
          {vat:"16",num:0,},{vat:"17",num:0,},{vat:"18",num:0,},{vat:"19",num:0,},{vat:"20",num:0,},{vat:"21",num:0,},{vat:"22",num:0,},{vat:"23",num:0,},
        ]
      }
      this.req_lrate = tmp
      this.pv_lrate = tmp
      this.ck_lrate = tmp
    },
    onSubmit(){
      var sdata = {
        id:this.dspslot_id,
        req_lrate:this.req_lrate,
        pv_lrate:this.pv_lrate,
        ck_lrate:this.ck_lrate,
      }
      channel_slot_edit_rate(sdata).then(res => {
        var data = res.data
        console.log(data)
        this.$message({
          showClose: true,
          center:true,
          message: '操作成功',
          type: 'success'
        })
        this.dialogVisible = false
        this.resetForm()
      }).catch(err => {
        console.log(err)
      })

    },
    showInfo(info){
      this.dialogVisible = true
      if (!info.id  || info.id == '' ) {
        this.$message({
          showClose: true,
          center:true,
          message: '非法参数',
          type: 'error'
        })
        return
      }
      var tmp_req_houm = [
        {vat:"0",num:0,},{vat:"1",num:0,},{vat:"2",num:0,},{vat:"3",num:0,},{vat:"4",num:0,},{vat:"5",num:0,},{vat:"6",num:0,},{vat:"7",num:0,},
        {vat:"8",num:0,},{vat:"9",num:0,},{vat:"10",num:0,},{vat:"11",num:0,},{vat:"12",num:0,},{vat:"13",num:0,},{vat:"14",num:0,},{vat:"15",num:0,},
        {vat:"16",num:0,},{vat:"17",num:0,},{vat:"18",num:0,},{vat:"19",num:0,},{vat:"20",num:0,},{vat:"21",num:0,},{vat:"22",num:0,},{vat:"23",num:0,},
      ]
      var tmp_pv_houm = [
        {vat:"0",num:0,},{vat:"1",num:0,},{vat:"2",num:0,},{vat:"3",num:0,},{vat:"4",num:0,},{vat:"5",num:0,},{vat:"6",num:0,},{vat:"7",num:0,},
        {vat:"8",num:0,},{vat:"9",num:0,},{vat:"10",num:0,},{vat:"11",num:0,},{vat:"12",num:0,},{vat:"13",num:0,},{vat:"14",num:0,},{vat:"15",num:0,},
        {vat:"16",num:0,},{vat:"17",num:0,},{vat:"18",num:0,},{vat:"19",num:0,},{vat:"20",num:0,},{vat:"21",num:0,},{vat:"22",num:0,},{vat:"23",num:0,},
      ]
      var tmp_ck_houm = [
        {vat:"0",num:0,},{vat:"1",num:0,},{vat:"2",num:0,},{vat:"3",num:0,},{vat:"4",num:0,},{vat:"5",num:0,},{vat:"6",num:0,},{vat:"7",num:0,},
        {vat:"8",num:0,},{vat:"9",num:0,},{vat:"10",num:0,},{vat:"11",num:0,},{vat:"12",num:0,},{vat:"13",num:0,},{vat:"14",num:0,},{vat:"15",num:0,},
        {vat:"16",num:0,},{vat:"17",num:0,},{vat:"18",num:0,},{vat:"19",num:0,},{vat:"20",num:0,},{vat:"21",num:0,},{vat:"22",num:0,},{vat:"23",num:0,},
      ]
      this.dspslot_id = info.id
      if (info.req_lrate){
        if (!info.req_lrate.hitems || info.req_lrate.hitems.length === 0){
          info.req_lrate.hitems = tmp_req_houm
        }
        this.req_lrate = info.req_lrate
      }
      if (info.pv_lrate){
        if (!info.pv_lrate.hitems || info.pv_lrate.hitems.length === 0){
          info.pv_lrate.hitems = tmp_pv_houm
        }
        this.pv_lrate = info.pv_lrate
      }
      if (info.ck_lrate){
        if (!info.ck_lrate.hitems || info.ck_lrate.hitems.length === 0){
          info.ck_lrate.hitems = tmp_ck_houm
        }
        this.ck_lrate = info.ck_lrate
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.edit {

}
</style>